<ion-header class="login-header">
	<ion-navbar hideBackButton="true">
    <ion-buttons start class="back-buttons" navPop>
      <button ion-button clear></button>
    </ion-buttons>

	</ion-navbar>
</ion-header>

<ion-content class="login-section">
	<div class="logo-img" [class.translateY]="hideLogo">
    <div><img src="assets/icon/logo.png" /></div>
	</div>

	<form #loginFormRef="ngForm" novalidate [class.translateY]="hideLogo">
		<ion-list no-lines>
      <!--
      maxlength="11"
      pattern="^1(3|4|5|7|8)\d{9}$"
      -->
			<ion-item>
        <div class="login-name"></div>
				<input [(ngModel)]="login.username"
               name="username"
               type="tel"
               maxlength="11"
               placeholder="请输入手机号"
               #usernameRef="ngModel"
               spellcheck="false"
               autocapitalize="off"
               required
        />
        <span *ngIf="login.username.length>0"
              class="clear-button"
              (click)="clearUserName()">
        </span>
      </ion-item>

			<ion-item>
        <!--
        pattern="\\w{6,12}"
        -->
        <div class="login-password"></div>
				<input [(ngModel)]="login.password"
               name="password"
               [type]="switchover.type"
               placeholder="请输入密码"
               #passwordRef="ngModel"
               minlength="6"
               maxlength="12"
               required
        >
        <span *ngIf="login.password.length>0"
              class="show-pwd"
              [class.active]="!switchover.status"
              (click)="switchoverPassword(switchover)">
        </span>
			</ion-item>

		</ion-list>
    <ul class="show-other">
      <li (click)="doForget()">忘记密码</li>
      <li (click)="doRegister()">立即注册</li>
    </ul>

    <button ion-button
            [disabled]="!loginFormRef.valid"
            (click)="executeLogin()"
            type="submit"
            block
    >登&nbsp;&nbsp;&nbsp;录</button>

	</form>

</ion-content>
